<%--
  Created by IntelliJ IDEA.
  User: 唐清枫
  Date: 2023/9/14
  Time: 18:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/Core_values.js"></script>

</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="app" style="width: 681px">
    <span>部门添加</span>
    <el-input type="text" v-model="input" style="width: 200px"></el-input>
    <el-button type="info" @click="insert()">添加</el-button>
    <el-table :data="tableData" border style="width: 100%" @selection-change="">
        <el-table-column prop="deptId" label="部门id" width="250"></el-table-column>
        <el-table-column prop="deptName" label="部门名称" width="250"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="openDialogUpdate(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteDept(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <!-- 模态框，用作修改数据时做数据回显用 -->
        <el-dialog title="修改部门名称" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                    <el-input v-model="form.deptId" autocomplete="off" type="text"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                    <el-input v-model="form.deptName" autocomplete="off" type="text"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            input: "",
            tableData: [],
            dialogFormVisible: false,
            form: {
                deptId: "",
                deptName: ""
            },
            formLabelWidth: '120px',
        },
        methods: {
            selectAll() {
                var v = this
                $.ajax({
                    url: "../dept/info",
                    type: "get",
                    success: function (res) {
                        v.tableData = res.object
                    }
                })
            },
            deleteDept(data){
                var v = this
                v.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url:"../dept/delete/"+data.deptId,
                        type:"DELETE",
                        dataType:"json",
                        success:function (res) {
                            if(res.status==200){
                                v.$message.success("删除成功！")
                                v.currentPage=1
                                v.selectAll()
                            }else if(res.status==403){
                                v.$message.warning(res.message)
                            }
                        },
                        error:function (e) {
                            console.log(e)
                            v.$message.error("删除失败！")
                        }
                    })
                });
            },
            update() {
                var v = this
                $.ajax({
                    url: "../dept/update",
                    type: "post",
                    // dataType:"json",
                    // contentType:"application/json",
                    data:
                    // JSON.stringify(v.from),
                        {
                            deptId: v.form.deptId,
                            deptName: v.form.deptName
                        },
                    success: function (res) {
                        v.$message.success(res.message)
                        v.selectAll()
                        v.dialogFormVisible = false
                    }
                })
            },
            insert() {
                var v = this
                $.ajax({
                    url: "../dept/insert",
                    type: "post",
                    data: {
                        deptName: v.input
                    },
                    success: function (res) {
                        v.$message.success(res.message)
                        v.selectAll()
                    }
                })
            },
            openDialogUpdate(data) {
                var v = this
                v.form.deptName = data.deptName
                v.form.deptId = data.deptId
                v.dialogFormVisible = true
            }
        },
        mounted: function () {
            this.selectAll()
        }
    })

</script>
</body>
</html>
